import React, { Component, Fragment } from 'react';
import { Animated, View, Text, Easing } from 'react-native';
import _ from 'lodash';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import styles from './style';

/* 
overlay: ReactComponentNode, 作为组件的children属性存在
button: ReactComponentNode, 作触发overlay部分的显示和隐藏
onChange: function, fn: void (visible), overlay的visible状态发生变更时调用

*/

let _beforeChange = 'false';
const DEF_BTN = ({ onPress }) => (
  <FontAwesome name="ellipsis-h" size={32} color="#666" onPress={onPress} />
);
export default class Popover extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      opacity: new Animated.Value(1),
      height: new Animated.Value(1),
      width: new Animated.Value(1)
    };
  }
  changeHandle = () => {
    if (_.isFunction(this.props.onChange)) {
      this.props.onChange(this.state.visible);
    }
  };
  pressHandle = () => {
    this.setState(
      {
        visible: !this.state.visible
      },
      () => {
        if (this.state.visible) {
          Animated.parallel(
            ['opacity', 'height', 'width'].map(style =>
              Animated.timing(this.state[style], {
                toValue: 1,
                duration: 1000,
                easing: Easing.linear
              })
            )
          ).start();
        } else {
          Animated.parallel(
            ['opacity', 'height', 'width'].map(style =>
              Animated.timing(this.state[style], {
                toValue: 0,
                duration: 300,
                easing: Easing.linear
              })
            )
          ).start();
        }
      }
    );
  };
  render() {
    const Btn = this.props.button || DEF_BTN;
    const { opacity, width, height } = this.state;
    return (
      <View style={[styles.wrap, this.props.style]}>
        <Btn onPress={this.pressHandle} />
        <Animated.View
          style={[
            {
              position: 'absolute',
              zIndex: 100,
              backgroundColor: '#f60',
              top: 40
            },
            {
              opacity,
              height: height.interpolate({
                inputRange: [0, 1],
                outputRange: [0, 500]
              }),
              width: width.interpolate({
                inputRange: [0, 1],
                outputRange: [0, 500]
              })
            }
          ]}
        >
          {this.props.children || <Text>暂无内容</Text>}
        </Animated.View>
      </View>
    );
  }
  componentWillUpdate(props) {
    _beforeChange = this.state.visible;
  }
  componentDidUpdate(props) {
    if (this.state.visible !== _beforeChange) {
      this.changeHandle();
    }
  }
}

export class Ppv extends Component {
  componentWillReceiveProps(next) {}
  render() {
    const { onToggle, name, children, visible, style } = this.props;
    if (!visible) return null;
    return (
      <View
        ref={name}
        style={[
          style,
          {
            position: 'absolute',
          }
        ]}
      >
        {children || <Text>暂无内容</Text>}
      </View>
    );
  }
}
